<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-group compact style="display: flex;">
				<a-select
					v-model="businessAccountId"
					class="heade-left-box"

				>
					<a-select-option v-for="it in orgList" :value="it.id" :key="it.id">
						{{ it.name }}
					</a-select-option>
				</a-select>
				<a-input-search
					class="heade-right-box"
					:placeholder="this.$i18n('selectPeople.input',this.$i18n('selectPeople.bussinessOraganization.role.label'))"
					v-model.trim="searchValue"
					@search="onSearch"
				/>
			</a-input-group>
		</div>


		<div class="content-wrapper">
			<scroll-list
				panel="BusinessRole"
				command="buinessRoleList"
				ref="scrollList"
				:firstLoadSearch="false"
			/>
		</div>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';

import { getPanelData } from '@/api/modules/SelectOrgApi';

export default {
	name: 'BusinessRole',
	components: {
		scrollList
	},
	inject: ['app'],
	data() {
		return {
			accountId: '',
			businessAccountId: '',
			orgList: [],
			searchValue: ''
		};
	},
	created() {
		this.$nextTick(() => {
			this.accountId = this.app().switchAfterUnit.id;
		});
	},
	computed: {},
	watch: {
		accountId: {
			handler() {
				this.getOrgList();
			},
			immediate: true
		},
		businessAccountId() {
			this.searchValue = '';
			this.onSearchData();
		}
	},
	methods: {
		getOrgList() {
			this.orgList = [];
			this.businessAccountId = '';
			if (!this.accountId) {
				return;
			}
			let params = {
				panel: 'BusinessAccount',
				command: 'businessOrgList',
				arguments: { accountId: this.accountId }
			};
			getPanelData(params).then((res) => {
				this.orgList = res.data;
				if (this.orgList[0]) {
					this.businessAccountId = this.orgList[0].id;
				}
			});
		},
		onSearch(val) {
			this.$nextTick(() => {
				this.onSearchData();
			});
		},
		onSearchData() {
			this.$refs.scrollList.initProps();
			if (!this.businessAccountId) {
				return;
			}
			const data = {
				keyword: this.searchValue,
				accountId: this.accountId,
				businessAccountId: this.businessAccountId
			};
			this.$refs.scrollList.search(data);
		},
		onChangeAccount(data) {
			this.accountId = data.id;
		}
	}
};
</script>

<style scoped lang="scss">

</style>
